<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title ng-bind="title"></title>
        <link rel="stylesheet" href="../../style/css/bootstrap.css">
        <link rel="stylesheet" href="../../style/css/matrix-style.css">
        <link rel="stylesheet" href="toast.css">
        <script src="../../../node_modules/angular/angular.js"></script>
        <script src="../../a.ui.js"></script>
        <script src="toast.js"></script>
        <script>
            var app = angular.module('app', ['a.ui']);
            app.run(function ($rootScope, $toast) {
                $rootScope.title = 'Toaster';
                $rootScope.types = ['info', 'error', 'success', 'wait', 'warn'];
                $rootScope.msg = 'Message';
                $toast.wait('正在加载中..');
                $rootScope.toast = function (type) {
                    $toast[type]($rootScope.msg);
                };
                $rootScope.clearToasts = function () {
                    $toast.clear();
                }
            });
        </script>
    </head>
    <body>
        <div class="container">
            <h1 class="text-center" ng-bind="title"></h1>
            <div class="form-group form-inline">
                <label>提示消息:</label>
                <input type="text" class="form-control" ng-model="msg">
            </div>
            <div class="btn-group">
                <button class="btn btn-sm btn-default" ng-repeat="type in types track by $index" ng-click="toast(type)">{{type}}</button>
            </div>
            <button class="btn btn-sm btn-default" ng-click="clearToasts()">关闭所有toast</button>
        </div>
    </body>
</html>